<template>
  <header class='head-nav'>
    <el-row>
      <el-col :span='4' class='logo-container'>
        <img src='../assets/logo.png' class='logo' alt='' />
        <span class='title'>沧海黎明录</span>
      </el-col>
      <el-col :span='4' class='user'>
        <div class='userinfo'>
          <div class='welcome'>
            <p class='name comename'>欢迎</p>
            <p class='name avatarname'>{{ user_info.name }}</p>
          </div>
          <span class='username'>
            <!-- 下拉箭头 -->
            <el-dropdown
              trigger='click'
              @command='setDialogInfo'
              @visible-change='getUserInfo'
            >
              <span class='el-dropdown-link'>
                <i class='el-icon-caret-bottom el-icon--right'></i>
              </span>
              <el-dropdown-menu slot='dropdown'>
                <el-dropdown-item command='info'>个人信息</el-dropdown-item>
                <el-dropdown-item command='logout'>登出</el-dropdown-item>
                <el-dropdown-item>
                  <span>体力值：未做</span>
                  <el-progress
                    :percentage='50'
                    :color='tiliColor'
                  ></el-progress>
                  <span>生命值：{{ user_info.hp }}/{{ user_info.max_hp }}</span>
                  <el-progress :percentage='hpprogress'></el-progress>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </span>
        </div>
      </el-col>
    </el-row>
  </header>
</template>
<script>
export default {
  name: 'head-nav',
  data() {
    return {
      user_info: {},
      tiliColor: 'green',
      hpprogress: 100,
    };
  },
  computed: {},
  created() {
    this.getUserInfo();
  },
  watch: {
    user_info(newVal, oldVal) {
      this.cleanhpprogress();
    },
  },
  methods: {
    getUserInfo() {
      // 获取玩家数据
      this.$axios
        .get('/api/users/getinfo')
        .then((res) => {
          this.user_info = res.data;
        })
        .catch((err) => console.log(err));
    },
    cleanhpprogress() {
      this.hpprogress = Math.floor(
        (this.user_info.hp / this.user_info.max_hp) * 100
      );
      console.log('this.hpprogress', this.hpprogress);
    },
    setDialogInfo(cmdItem) {
      switch (cmdItem) {
        case 'info':
          this.showInfoList();
          break;
        case 'logout':
          this.logout();
          break;
      }
    },
    showInfoList() {
      this.$router.push('/infoshow');
    },
    logout() {
      // 清除token
      localStorage.removeItem('eleToken');
      // 设置vuex store
      this.$store.dispatch('clearCurrentState');
      //跳转登录页面
      this.$router.push('/login');
    },
  },
};
</script>
<style scoped>
.head-nav {
  width: 100%;
  height: 60px;
  min-width: 600px;
  padding: 6px;
  background: #fffedef8;
  color: rgb(0, 0, 0);
  border-bottom: 1px solid #ffffff;
}
.logo-container {
  line-height: 60px;
  min-width: 400px;
}
.logo {
  height: 50px;
  width: 50px;
  margin-right: 5px;
  vertical-align: middle;
  display: inline-block;
}
.title {
  vertical-align: middle;
  font-size: 22px;
  font-family: 'Microsoft YaHei';
  letter-spacing: 3px;
}
.user {
  line-height: 60px;
  text-align: right;
  float: right;
  padding-right: 10px;
}
.welcome {
  display: inline-block;
  width: auto;
  vertical-align: middle;
  padding: 0 5px;
}
.name {
  line-height: 20px;
  text-align: center;
  font-size: 14px;
}
.comename {
  font-size: 12px;
}
.avatarname {
  color: rgb(0, 0, 0);
  font-weight: bolder;
}
.username {
  cursor: pointer;
  margin-right: 5px;
}
.el-dropdown {
  color: rgb(0, 0, 0);
}
</style>

